<template>
    <div class="nav">

        <!--S导航列表-->
        <div :class="item.value === selected ? 'child selected' : 'child'" v-for="item in data" :key="item.value">
            <div class="content" @click="$emit('change',item.value)">
                <router-link class="a" :to="'/'+item.value">
                    <svg class="icon">
                        <use :xlink:href="item.value === selected ? item.iconed : item.icon"></use>
                    </svg>
                    <span>{{item.text}}</span>
                </router-link>
            </div>
        </div>
        <!--E导航列表-->

    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name: "i-nav",
    data () {
      return {
          selected: "home",
          data: [
              {text: '推荐', value: 'home', icon: '#icon-tuijian-copy', iconed: '#icon-tuijian'},
              {text: '我的', value: 'member', icon: '#icon-Cherry-gerenzhongxin-copy', iconed: '#icon-Cherry-gerenzhongxin'}
          ],
          // 发红包按钮状态
          send_status: "close",
      }
    },
    computed: {
        ...mapState({
            main: 'main'
        })
    },
    watch: {
        "$route" (to) {
            this.setSelected(to.name)
        }
    },
    created() {
        this.setSelected(this.$route.name)
    },
    methods: {
        // 设置选中的底部导航状态
        setSelected(name) {
            if(this.main.includes(name)){
                this.selected = name
            }
        }
    }
}
</script>

<style scoped lang="less" src="./nav.less"></style>
